"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/3
 */
import * as React from 'react'

const {View, ScrollView, TouchableOpacity, Image} = require('react-native');
const {connect} = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const {Actions} = require("react-native-router-flux");
import {autoSize, commonProps, commonStyles} from "../../assets/styles/common";
import Line from "../../component/Line";
import MyText from "../../component/MyText";
import Avatar from "../../component/Avatar";
import MyIcon from "../../component/icon";
import DynamicItem from "../../component/DynamicItem";
import {groupStyles} from "../../assets/styles/groups";
import NavBackButton from "../../component/BackButton";
import {GroupDetailPage} from "../../interface/router";

class Page extends React.Component<GroupDetailPage, any> {


    constructor(props: GroupDetailPage, context: any) {
        super(props, context);
    }

    componentDidMount(): void {

        this.props.dispatch({
            type: 'group/fetchGroupPosts',
            payload: {
                pi: 1,
                ps: 10,
                groupId: this.props.groupItem.id
            }
        })
    }

    goToDynamicDetail = (dynamicItem) => {
        // console.log(dynamicItem);
        this.props.dispatch({
            type: 'post/detail',
            payload: {
                dynamicItem,
                postType: 'group'
            }
        });
    };
    renderItem = ({item}) => {

        const avatarProps = {
            borderWidth: 1,
            borderColor: '#fff',
            size: 35,
        };
        return (
            <View style={[commonStyles.flexColumn, groupStyles.listItem]}>
                <View style={commonStyles.flexRow}>
                    <Avatar source={item.avatar} circle={false} size={autoSize(85)}/>
                    <View style={[commonStyles.flexColumn, commonStyles.flex1, groupStyles.content]}>
                        <MyText numberOfLines={1}>{item.title}</MyText>
                        <MyText numberOfLines={2}>{item.sub}</MyText>
                    </View>
                </View>
                <View>
                    <View style={commonStyles.flexRow}>
                        <View style={[commonStyles.flexRow, commonStyles.flex1, groupStyles.content]}>
                            <Avatar {...avatarProps}
                                    content={`+${item.member_count}`}
                                    style={{zIndex: 10}}/>
                            <Avatar {...avatarProps}
                                    style={[groupStyles.member, {zIndex: 8, backgroundColor: '#DC6451'}]}/>
                            <Avatar {...avatarProps}
                                    source={item.avatar}
                                    style={[groupStyles.member, {zIndex: 6}]}/>
                            <Avatar {...avatarProps}
                                    source={item.avatar}
                                    style={[groupStyles.member, {zIndex: 4}]}/>
                            <Avatar {...avatarProps}
                                    source={item.avatar}
                                    style={[groupStyles.member, {zIndex: 0}]}/>
                        </View>
                        <TouchableOpacity>
                            <View
                                style={[commonStyles.flexRow, groupStyles.joinBtn, item.is_join ? groupStyles.isJoin : null]}>
                                <MyIcon name={!item.is_join ? 'icon-jia1' : 'icon-gou'}
                                        color={item.is_join ? '#999' : '#000'} size={15}/>
                                <MyText fontSize={15} style={{marginLeft: 5}}
                                        color={item.is_join ? '#999' : '#000'}>{item.is_join ? '已加入' : '加入'}</MyText>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        )
    };

//点赞
    onPraise = (type: string, item) => {

        // console.log(1);
        this.props.dispatch({
            type: 'post/praise',
            payload: {
                type,
                typeId: item.id,
                item,
                from: 'group'
            }
        })
    };
    renderDynamicItem = (item: postItem, index) => {
        return <DynamicItem item={item}
                            key={index}
                            onLikePress={this.onPraise.bind(this, 'post', item)}
                            onCommentPress={_ => this.goToDynamicDetail(item)}
                            onContentPress={_ => this.goToDynamicDetail(item)}
                            onUserInfoPress={company => Actions.companyInfo({company})}/>
    };

    render() {
        return (
            <View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar}
                               leftButton={<NavBackButton/>}
                               rightButton={{
                                   title: '详情',
                                   tintColor: '#fff',
                                   handler: Actions.groupInfoDetail.bind(this, {
                                       title: this.props.title,
                                       group: this.props.groupItem
                                   })
                               }}
                               title={{title: this.props.title, tintColor: '#fff'}}
                />
                <TouchableOpacity style={[commonStyles.listItem, {padding: 10, backgroundColor: '#fff'}]}
                                  onPress={Actions.newPostings.bind(this, {
                                      postType: 'groups',
                                      tip: '发表到群组',
                                      item: this.props.groupItem
                                  })}>
                    <Image source={require('../../assets/image/avatar_six.png')} width={autoSize(35)}
                           height={autoSize(35)}/>
                    <MyText style={{color: '#999', fontSize: 16, marginLeft: 10}}>对这个群组说些话</MyText>
                </TouchableOpacity>
                <View style={commonStyles.flex1}>
                    <ScrollView>

                        {this.props.group.postList.map(this.renderDynamicItem)}

                        {/**/}
                        <Line/>

                        <View style={[commonStyles.centerVH, {backgroundColor: '#F5F4F4', padding: 10}]}>
                            <MyText>赞</MyText>
                        </View>

                    </ScrollView>
                </View>
            </View>
        );
    }
}


export default connect(
    ({auth, group, post}) => ({auth, group, post})
)(Page);